import React, { JSX } from 'react';
import { NulCommonOperations, NulDialog, NulFormItem } from '../../components/NulDialog';
import { MenuItem, Select } from '@mui/material';
import { ModelEntry } from '../../actions/Analyze';

interface SwitchInventoryDialogProps {
  open: boolean;
  onClose: () => void;
  models: ModelEntry[];
  onChange: (selectedId: number) => void;
  selectedId: number;
};

function SwitchModelDialog(props: SwitchInventoryDialogProps): JSX.Element {
  const { open, onClose, models, onChange, selectedId } = props;

  const [value, setValue] = React.useState<string | undefined>(undefined);

  const handlePositiveClicked = () => {
    if (value !== undefined) {
      const selected: number = parseInt(value);
      onChange(selected);
    }
    onClose();
  };

  return (
    <NulDialog
      open={open}
      onClose={onClose}
      title='切换模型'
      operations={
        <NulCommonOperations
          onPositiveClicked={handlePositiveClicked}
          onNegativeClicked={onClose}
        />
      }
    >
      <NulFormItem hint='模型' component={
        <Select
          value={value}
          onChange={(event) => { setValue(event.target.value); }}
          fullWidth size='small'
          defaultValue={models.find(entry => entry.id === selectedId)?.id.toString()}
        >
          {models.map(entry => (
            <MenuItem value={entry.id.toString()}>{entry.name} ({entry.type})</MenuItem>
          ))}
        </Select>
      } />
    </NulDialog>
  );
}

export default SwitchModelDialog;
